<template>
  <div class="botton">
    <div class="head">
      <div class="logins" @click="getLogin">登陆</div>
      <div class="registerss">注册</div>
    </div>
    <div class="from" @submit="handleSubmit">
      <el-form :model="form" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="account" label-width="60px" :error="errors.account">
          <el-input v-model="form.account" placeholder="请输入账号" />
          <el-error :error="errors.account"></el-error>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="60px" :error="errors.password">
          <el-input type="password" v-model="form.password" class="rounded-input" placeholder="请输入密码" />
          <el-error :error="errors.password"></el-error>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" label-width="60px" :error="errors.phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
          <el-error :error="errors.phone"></el-error>
        </el-form-item>
        <el-form-item label-width="50px" :error="errors.agreement">
          <el-checkbox v-model="form.agreement" class="title">
            我已同意隐私条款和服务条款
          </el-checkbox>
          <el-error :error="errors.agreement"></el-error>
        </el-form-item>
        <el-button @click.native.prevent="handleSubmit" size="large" class="subBtn" type="primary" native-type="submit"
          label-width="60px">点击注册</el-button>
      </el-form>
    </div>
    <span class="actions" @click="getLogin"><a>立即登陆</a></span>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        account: '',
        password: '',
        phone: '',
        agreement: false
      },
      errors: {}
    }
  },
  methods: {
    getLogin() {
      this.$router.push('/login')
    },
    handleSubmit() {
      this.errors = {};
      let hasError = false;
      // 从 this.form 对象中提取属性
      const { account, password, phone, agreement } = this.form;
      if (!this.form.account) {
        this.$set(this.errors, 'account', '请输入账户');
        hasError = true;
      }
      if (!this.form.password) {
        this.$set(this.errors, 'password', '请输入密码');
        hasError = true;
      } else if (this.form.password.length < 6 || this.form.password.length > 14) {
        this.$set(this.errors, 'password', '密码长度为6-14个字符');
        hasError = true;
      }
      if (!this.form.phone) {
        this.$set(this.errors, 'phone', '请输入手机号');
        hasError = true;
      } else if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        this.$set(this.errors, 'phone', '请输入正确的手机号');
        hasError = true;
      }
      if (!this.form.agreement) {
        this.$set(this.errors, 'agreement', '请同意条款');
        hasError = true;
      }

      if (!hasError) {
        console.log('账户:', account);
        console.log('密码:', password);
        console.log('手机号:', phone);

        // 构造要发送的数据对象
        const postData = {
          account,
          password,
          phone
        };
        this.$emit('getRegister', postData);
        // 发送 POST 请求
        axios.post('http://localhost:8090/user', postData)
          .then(response => {
            // 提交成功，清空表单数据
            this.form.account = '';
            this.form.password = '';
            this.form.phone = '';
            this.form.agreement = false;
            console.log('注册成功:', response.data);
            this.$notify({
              title: '注册成功',
              message: '请前往登录',
              type: 'success'
            });
          })
          .catch(error => {
            this.$notify.error({
              title: '注册失败',
              message: '请重新输入'
            });
            console.error('注册失败:', error);
          });
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.botton {
  position: relative;
  margin: 100px auto;
  width: 450px;
  height: 650px;
  background-color: #fff;
  border-radius: 5%;
}

.from {
  position: absolute;
  width: 350px;
  height: 350px;
  top: 140px;
  left: 35px;
}

.subBtn {
  height: 50px;
}

.botton .head {
  position: absolute;
  top: -10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
  width: 100%;
  height: 41px;
  color: #fff;
  font-size: 25px;
  font-weight: 540;
}

.registerss {
  width: 50px;
  color: #000;
  margin-left: 25px;
  border-bottom: 4px solid #ff5c00;
  border-radius: 2px;
  cursor: pointer;
}

.logins {
  width: 50px;
  color: #bbb;
  margin-left: 40px;
  cursor: pointer;
}

.actions {
  cursor: default;
  position: absolute;
  top: 530px;
  left: 20px;
}

.actions a {
  color: #ff5c00;
  font-size: 18px;
  font-weight: 540;
}
</style>
